<!--查看缴费明细 -->
<template>
  <el-dialog
    title="查看缴费明细"
    :visible.sync="visible"
    width="900px"
    @close="handleClose"
    class="dialog-fee"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="120px"
      disabled
    >
      <!-- 缴费信息区域 -->
      <div class="form-section">
        <h3 class="section-title">缴费信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="缴费状态">
            <span>{{ dict.payment_status[Number(form.paymentState)] }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="缴费方式">
            <span>{{ dict.payment_method[Number(form.paymentMethod)] }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="培训费/考试费">
            {{ form.paymentAmount }}
          </el-descriptions-item>
          <el-descriptions-item label="诺诺单号">
            {{ form.nuoNuoOrderNo }}
          </el-descriptions-item>
          <el-descriptions-item label="缴费凭证">
            <template v-if="form.paymentVoucher">
              <el-image
                style="width: 120px; height: 80px; margin-right: 10px"
                :src="form.paymentVoucher"
                fit="contain"
              ></el-image>
              <el-link type="primary" @click="viewPaymentVoucher">查看</el-link>
            </template>
            <template v-else>无</template>
          </el-descriptions-item>
          <el-descriptions-item label="是否办结">
            <span>{{ dict.is_settled[Number(form.isSettled)] }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="缴费备注">
            {{ form.exampleOne }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 单位信息区域 -->
      <div class="form-section">
        <h3 class="section-title">单位信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="单位名称">
            {{ form.unitName }}
          </el-descriptions-item>
          <el-descriptions-item label="单位统一信用代码">
            {{ form.socialCreditCode }}
          </el-descriptions-item>
          <el-descriptions-item label="所属区域">
            <span>{{
              dict.administrative_area[Number(form.administrativeArea)]
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="所在单位性质">
            <span>{{ dict.unit_nature[Number(form.unitNature)] }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="联系人姓名">
            {{ form.contact }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">
            {{ form.unitPhonenumber }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 人员基本信息区域 -->
      <div class="form-section">
        <h3 class="section-title">人员基本信息</h3>
        <el-table :data="form.personList" border style="width: 100%">
          <el-table-column prop="studentName" label="学员" width="120" />
          <el-table-column prop="projectMap" label="报名项目" width="320" />
          <el-table-column prop="trainingClass" label="培训班" width="120" />
          <el-table-column prop="trainingType" label="培训类别" width="120">
            <template slot-scope="scope">
              {{ dict.training_type[Number(scope.row.trainingType)] }}
            </template></el-table-column
          >
          <el-table-column prop="projectSum" label="费用" width="120" />
        </el-table>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DictTag from "@/components/DictTag";
import { projectTreeSelect } from "@/api/training/projects";
export default {
  name: "FeeViewDialog",
  components: {
    DictTag,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({
        // 缴费信息字段
        paymentState: "已缴费", // 可选：已缴费/未交费/已上传缴费凭证/已申请退费/已退费
        paymentMethod: "线上缴费", // 可选：线上缴费/转账缴费
        paymentAmount: "XXX",
        nuoNuoOrderNo: "123456",
        paymentVoucher:
          "http://127.0.0.1:9300/statics/2025/09/19/1_20250919113116A007.png", // 缴费凭证图片地址（实际需替换为真实地址）
        isHandled: "已办结", // 可选：已办结/未办结
        exampleOne: "XXX",
        // 基本信息属性
        subjectId: "",
        subjectId2: "",
        trainingClass: "",
        trainingType: "新训",
        studentName: "",
        certificateType: "idCard",
        certificateStarttime: "",
        certificateEndtime: "",
        idValidDate: [],
        sex: "男",
        nation: "",
        qualification: "",
        graduatedFrom: "",
        major: "",
        address: "",
        postCode: "",
        fax: "", // 传真
        email: "", // 电子邮箱
        unitName: "",
        socialCreditCode: "",
        administrativeArea: "",
        unitNature: "enterprise",
        contact: "",
        unitPhonenumber: "",
        userType: "", // 人员类型
        birthDate: "", // 出生年月
        position: "", // 职务
        contactPhone: "", // 联系人电话
        archiveMissing: [],
        protocolMissing: false,
        remark: "",
        exampleTwo: [],
      }),
    },
    queryParamsData: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
        studentName: null,
        idNumber: null,
        certNumber: null,
        trainingType: null,
        unitPhonenumber: null,
        unitName: null,
        paymentState: null,
        recordStatus: null,
        submitStatus: null,
        startTime: null,
        endTime: null,
        projectId: null,
      }),
    },
    //字典
    dict: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {},
      queryParams: {},
      rules: {
        // 缴费信息验证规则
        paymentState: [
          { required: true, message: "请选择缴费状态", trigger: "change" },
        ],
        paymentMethod: [
          { required: true, message: "请选择缴费方式", trigger: "change" },
        ],
        paymentAmount: [
          { required: true, message: "请输入培训费/考试费", trigger: "blur" },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: "请输入有效的金额（最多两位小数）",
            trigger: "blur",
          },
        ],
        nuoNuoOrderNo: [
          { required: true, message: "请输入诺诺单号", trigger: "blur" },
        ],
        handleSituation: [
          { required: true, message: "请选择办结情况", trigger: "change" },
        ],
        exampleOne: [
          { max: 200, message: "缴费备注最多输入200个字符", trigger: "blur" },
        ],
        // 基本信息验证规则
        subjectId: [
          { required: true, message: "请选择报名类别", trigger: "change" },
        ],
        subjectId2: [
          { required: true, message: "请选择报名项目", trigger: "change" },
        ],
        trainingClass: [
          { required: true, message: "请选择培训班", trigger: "change" },
        ],
        trainingType: [
          { required: true, message: "请选择培训类别", trigger: "change" },
        ],
        studentName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        unitPhonenumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        certificateType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        idNumber: [
          { required: true, message: "请输入证件编号", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        postCode: [
          { required: true, message: "请输入邮编", trigger: "blur" },
          {
            pattern: /^\d{6}$/,
            message: "请输入正确的6位邮编",
            trigger: "blur",
          },
        ],
        unitName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        // 带字段的验证规则
        userType: [
          { required: true, message: "请输入人员类型", trigger: "blur" },
        ],
        birthDate: [
          { required: true, message: "请选择出生年月", trigger: "change" },
        ],
        position: [{ required: true, message: "请输入职务", trigger: "blur" }],
        fax: [{ max: 50, message: "传真最多输入50个字符", trigger: "blur" }],
        email: [
          { type: "email", message: "请输入有效的电子邮箱", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的联系人电话",
            trigger: "blur",
          },
        ],
      },
      // 所有部门树选项
      projectOptions: undefined,
      units: null,
      registrationDtoList: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = JSON.parse(JSON.stringify(this.formData));
        console.log("this.formData", this.formData.units);
        // 从 units 中提取单位信息
        if (this.formData.units) {
          const unit = this.formData.units;
          console.log("unit", unit);
          this.form.unitName = unit.unitName || "";
          this.form.socialCreditCode = unit.socialCreditCode || "";
          this.form.administrativeArea = unit.administrativeArea || "";
          this.form.unitNature = unit.unitNature || "";
          this.form.contact = unit.contact || "";
          this.form.unitPhonenumber = unit.phonenumber || "";
        }

        // 从 registrationDtoList 中提取人员基本信息
        if (
          this.formData.registrationDtoList &&
          Array.isArray(this.formData.registrationDtoList)
        ) {
          this.form.personList = this.formData.registrationDtoList.map(
            (student) => ({
              studentName: student.studentName,
              projectMap: student.projectMap || "",
              trainingClass: student.trainingClass || "",
              trainingType: student.trainingType || "",
              projectSum: student.projectSum || "0", // 假设费用字段为 projectSum
            })
          );
        } else {
          this.form.personList = [];
        }
        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
      }
    },
  },
  created() {
    this.getProjectTree();
  },
  methods: {
    //下拉树
    /** 下拉树结构 */
    getProjectTree(val) {
      var params = { projectName: val };
      params.projectId = this.queryParams.projectId;
      projectTreeSelect(params).then((response) => {
        this.projectOptions = response.data;
        this.enabledProjectOptions = this.filterDisabledDept(
          JSON.parse(JSON.stringify(response.data))
        );
      });
    },
    getFlattenedProjectOptions() {
      return this.flattenProjectOptions(this.projectOptions);
    },
    flattenProjectOptions(options, result = [], prefix = "") {
      if (!options || !Array.isArray(options)) return result;

      options.forEach((item) => {
        // 添加当前节点到结果中
        result.push({
          id: item.id,
          label: prefix + item.label,
          disabled: item.disabled,
        });

        // 递归处理子节点，添加层级前缀
        if (item.children && item.children.length > 0) {
          this.flattenProjectOptions(item.children, result, prefix + "　"); // 使用全角空格作为前缀
        }
      });

      return result;
    },
    // 查看缴费凭证
    viewPaymentVoucher() {
      if (this.form.paymentVoucher) {
        // 弹层预览缴费凭证图片
        this.$alert(
          `<img src="${this.form.paymentVoucher}" style="max-width: 100%;">`,
          "缴费凭证预览",
          {
            dangerouslyUseHTMLString: true, // 允许 HTML 字符串
            confirmButtonText: "确定",
          }
        );
      }
    },
    handleCancel() {
      this.$emit("update:visible", false);
      this.$emit("cancel");
    },

    handleClose() {
      this.$emit("update:visible", false);
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    },
  },
};
</script>

<style scoped>
.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.section-title {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}

::v-deep .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
  padding: 20px;
}
.dialog-fee ::v-deep .el-dialog__header {
  text-align: center;
}
::v-deep .el-descriptions__label {
  font-weight: normal;
  color: #666;
}

::v-deep .el-descriptions__cell {
  padding: 8px 0;
}
</style>
